<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>禀帖科技|川派麻将-登录</title>
        <link rel="stylesheet" type="text/css" href="web/Skin/Theme/Css/comm.css" />
        <link rel="stylesheet" type="text/css" href="web/Skin/Theme/Css/icon.css" />
        <link rel="stylesheet" type="text/css" href="web/Skin/Theme/Css/my.css" />
        <link rel="stylesheet" type="text/css" href="web/Skin/Theme/Css/agent.css" />
        <script src="web/Skin/Theme/Js/flexible_css.js" type="text/javascript" charset="utf-8"></script>
        <script src="web/Skin/Theme/Js/flexible.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            .content{background: url("web/images/loginbg.png");width: 7.5rem;height: 12.06rem;background-size: 100% 100%;}
            .loginpart{margin-top: 6.7rem;}
            .loginarea{width: 4.4rem;margin: 0 auto;}
            .phoneinput{background: url("web/images/phonebg.png");width: 4.4rem;height: 0.9rem;background-size: 100% 100%;line-height: 0.9rem;}
            .codeinput{background: url("web/images/verbg.png");width: 4.4rem;height: 0.9rem;background-size: 100% 100%;margin-top: 0.35rem;}
            .loginbtn{margin-top: 0.35rem;text-align: center;}
            .loginbtn img{width: 2.4rem;height: 0.73rem;}
            .phoneinput input{font-family: "微软雅黑"; font-size: 0.32rem;color: #999999;width:2.5rem;height: 0.7rem;line-height: 0.7rem;margin-top: 0.09rem;text-indent: 0.1rem;float: right;margin-right: 0.1rem;border-style: none;}
            .codeinput input{font-family: "微软雅黑"; font-size: 0.32rem;color: #999999;width:1rem;height: 0.7rem;line-height: 0.7rem;margin-top: 0.09rem;text-indent: 0.1rem;float: right;margin-right: 0.1rem;border-style: none;}
            .codeinput img{width:1.46rem;height: 0.62rem;}
            .codebtn{background: url("web/images/codebtn.png");width: 1.46rem;height: 0.62rem;background-size: 100% 100%;float: right;margin-top: 0.14rem;margin-right: 0.1rem;}
            .codebg{background: url("web/images/codebg.png");width: 1.46rem;height: 0.62rem;background-size: 100% 100%;float: right;margin-top: 0.14rem;margin-right: 0.1rem;text-align: center;}
            .count{font-family: "微软雅黑"; font-size: 0.32rem;color: #ffffff;height: 0.62rem;line-height: 0.62rem;}
            .cbtn{width: 1.46rem;height: 0.62rem;display: table;line-height: 0.62rem;}
        </style>
    </head>

    <body>
        <div class="content  b-h" id="content">
            <div class="loginpart">
                <div class="loginarea">
                    <ul>
                        <li class="phoneinput"><input type="text" id="mobile" placeholder="手机号码" /></li>
                        <li class="codeinput"><div class="codebtn"><a class="cbtn" id="btn_send"></a></div><div class="codebg" style="display:none"><a class="count" id="lbl_countdown"></a></div><input type="text" id="code" /></li>
                        <li class="loginbtn" id="btn_login"><img src="web/images/loginbtn.png"></li>
                    </ul>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="sms/static/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="sms/static/layer-v3.0.3/layer.js"></script>
        <script src="https://s11.cnzz.com/z_stat.php?id=1261874520&web_id=1261874520" language="JavaScript"></script>
        <script type="text/javascript">
            var storage = window.localStorage;
            if (storage.getItem('account')) {
                location.href = 'game.html';
            }
            $('#btn_send').click(function () {
                if ($(this).data('disabled')) {
                    return false;
                }
                sendsms();
            })
            $('#btn_login').click(function () {
                login();
            })
            function login() {
                var mobile = $('#mobile').val();
                var code = $('#code').val();
                if (mobile.length != 11) {
                    layer.msg('手机号码无效');
                    return;
                }
                if (code.length != 4) {
                    layer.msg('验证码无效');
                    return;
                }
                $.get('sms/smsvalidate.php', {mobile: mobile, code: code}, function (msg) {
                    if (typeof (msg) == 'string') {
                        msg = JSON.parse(msg);
                    }
                    if (msg.errcode == 0) {
                        console.log('写入localStorage.account='+mobile);
                        storage.setItem('account', mobile);
                        location.href = 'game.html';
                    } else {
                        layer.msg('验证码错误!');
                        $('#btn_send').data('reset', true);
                    }
                });
            }
            function sendsms() {
                var mobile = $('#mobile').val();
                if (mobile.length < 10) {
                    layer.msg('手机号码无效');
                    return;
                }
                button_countdown();
                $.get('sms/smssrv.php', {"mobile": mobile}, function (msg) {
                    if (typeof (msg) == 'string') {
                        msg = JSON.parse(msg);
                    }
                    if (msg.errcode == 0) {
                        layer.msg('验证码已发送到您的手机，请注意查收');
                    } else {
                        layer.msg(msg.errmsg);
                        $('#btn_send').data('reset', true);
                    }
                });
            }
            // 按钮倒计时功能
            function button_countdown() {
                var $btnSend = $('#btn_send');
                var $lblcd = $('#lbl_countdown');
                var sec = $btnSend.data('sec');
                var countdownsec = 30; // 倒计时
                if (!sec) {
                    sec = countdownsec;
                }
                $lblcd.text(countdownsec).parent().show();
                $btnSend.parent().hide();
                $btnSend.data('disabled', true);
                //var text = $btnSend.text();
                btn_countdown_fnc();
                var intv = setInterval(btn_countdown_fnc, 1000);
                var reset;
                function btn_countdown_fnc() {
                    reset = $btnSend.data('reset');
                    $lblcd.text(sec);
                    if (sec < 1 || reset) {
                        clearInterval(intv);
                        $btnSend.data('disabled', false);
                        $btnSend.parent().show();
                        $lblcd.text(countdownsec).parent().hide();
                        //$btnSend.text(text);
                        return;
                    }
                    sec--;
                    //$btnSend.text(text + '(' + sec + ')');
                }
            }
        </script>
    </body>

</html>